<template>
  <div class="category">
    <van-search
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/home/searchpopup').catch((err) => {})"
    />
    <transition name="van-slide-right">
      <router-view />
    </transition>
    <van-tree-select
      height="90vh"
      :items="categoryList"
      :main-active-index.sync="active"
      @click-nav="toCurrentCategory"
    >
      <template #content>
        <div>
          <section>
            <!-- <div>{{ banner_url }}</div> -->
            <img width="100%" height="150" :src="banner_url" />
          </section>
          <div class="title">
            <h4>{{ categoryTitle }}</h4>
            <div class="line"></div>
          </div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              v-for="item in subCategoryList"
              :key="item.id"
              @click="ToChannel(item.id)"
            >
              <img :src="item.wap_banner_url" width="100%" height="100%" />
              <div class="imgTitle">{{ item.name }}</div>
            </van-grid-item>
          </van-grid>
        </div>

        <!-- <img
          src="https://img01.yzcdn.cn/vant/apple-1.jpg"
          alt=""
          v-if="active === 0"
        />
        <img
          src="https://img01.yzcdn.cn/vant/apple-2.jpg"
          alt=""
          v-if="active === 1"
        /> -->
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import { categoryData, currentCategoryDate } from "@/request/api";
export default {
  data() {
    return {
      active: 0,
      categoryList: [],
      currentCategory: "",
      banner_url: "",
      categoryTitle: "",
      subCategoryList: [],
      // items: [{ text: "分组 1" }, { text: "分组 2" }],
    };
  },
  created() {
    categoryData().then((res) => {
      console.log(res);
      // this.categoryList=res.data.categoryList
      this.currentCategory = res.data.currentCategory;
      //需要处理自己的数据，text==name children==
      let newArr = JSON.parse(
        JSON.stringify(res.data.categoryList)
          .replace(/name/g, "text")
          .replace(/subCategoryList/g, "children")
      );
      this.categoryList = newArr;
      this.banner_url = this.currentCategory.banner_url;
      this.categoryTitle = this.currentCategory.name;
      this.subCategoryList = this.currentCategory.subCategoryList;
    });
  },
  mounted() {},
  methods: {
    toCurrentCategory(index) {
      console.log(index);
      let id = this.categoryList[index].id;
      currentCategoryDate({
        id: id,
      }).then((res) => {
        // console.log(res)
        this.currentCategory = res.data.currentCategory;
        this.banner_url = this.currentCategory.banner_url;
        this.categoryTitle = this.currentCategory.name;
        this.subCategoryList = this.currentCategory.subCategoryList;
      });
    },
    ToChannel(val) {
      console.log(val)
      this.$router.push('/channel?id='+val)
    },
  },
};
</script>

<style scoped lang="less">
.category {
  padding-bottom: 0.5rem;
  /deep/.van-sidebar {
    flex: 0.6;
    //  border:1px solid red;
  }
  .van-tree-select__content {
    section {
      padding: 10px 2%;
      position: relative;
      div {
        position: absolute;
        left: 0;
        top: 0;
        line-height: 150px;
        text-align: center;
        width: 100%;
        z-index: 1;
        color: #fff;
      }
      img {
        box-shadow: 0 0 3px #000;
        // css3的filter属性，brightness函数让元素变暗
        filter: brightness(70%);
      }
    }
    .title {
      height: 50px;
      line-height: 50px;
      position: relative;
      h4 {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30%;
        text-align: center;
        font-weight: normal;
        margin: auto;
        z-index: 2;
        background: #fff;
      }
      .line {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        height: 2px;
        width: 40%;
        background: #ccc;
        z-index: 1;
      }
    }
  }
}
// vue原生的过度效果
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
</style>
